<style lang="less">
@import "./login.less";
</style>

<template>
    <div class="login" :style="{'background-image':'url('+bg+')'}">
        <div class="login-con">
            <Card icon="log-in" title="欢迎登录" :bordered="false">
                <div class="form-con">
                    <login-form @on-success-valid="handleSubmit" :wantRefresh='wantRefresh'></login-form>
                    <p class="login-tip">输入用户名和密码登录</p>
                </div>
            </Card>
        </div>
    </div>

</template>

<script>
import LoginForm from '_c/login-form'
import { mapActions } from 'vuex'

export default {
  components: {
    LoginForm
  },
  data(){
    return{
      bg:require('@/assets/images/loginBg.jpg'),
      wantRefresh:'',
    }
  },
  methods: {
    ...mapActions(['handleLogin']),
    handleSubmit ({ username, password, captcha, uuid }) {
      this.handleLogin({ username, password, captcha, uuid }).then((res) => {
        localStorage.setItem('token', res.data.token)
        this.$router.push({
          name: this.$config.homeName
        })
      }).catch(err => {
        this.wantRefresh=this.getRandomInt(1000,99999)
      })
    },

    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },   
  }
}
</script>

<style >

</style>
